<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>animation动画</title>
		<style>
			/**{
				margin: 10px;
				padding: 10px;
			}*/
			.box-one{
				position: relative;
				width: 600px;
				height: 400px;
				background: url(image/home1.png) 0 0/100% 100% no-repeat;
				margin: 50px auto;
				animation: boxplay 4s linear infinite;
				-webkit-animation: boxplay 4s linear infinite;
			}
			
			.ad-position{
				position: absolute;
				right: 10px;
				bottom: 20px;
				width: 100px;
				height: 30px;
				/*border: solid red 1px;*/
				/*text-align: right;*/
				/*background-color: pink;*/
			}
			.ad-position a{
				display: inline-block;
				width: 20px;
				height: 20px;
				border: solid 1px rgba(0,0,0,.4);
				border-radius: 10px;
				margin-right:10px;
			}
			.ad-position .dot1{
				animation: dot1play 4s linear infinite;
			}
			.ad-position .dot2{
				animation: dot2play 4s linear infinite;
			}
			
			@keyframes boxplay{
				0%,60%{
					background: url(image/home1.png) 0 0/100% 100% no-repeat;
					}
				70%,100%{
					background: url(image/home2.png) 0 0/100% 100% no-repeat;
					}
			}
			@-webkit-keyframes boxplay{
				0%,60%{
					background: url(image/home1.png) 0 0/100% 100% no-repeat;
					}
				70%,100%{
					background: url(image/home2.png) 0 0/100% 100% no-repeat;
					}
			}
			
			@keyframes dot1play{
				0%,60%{
					background-color: rgba(255,255,255,1);
					}
				70%,100%{
					background-color: transparent;
					}
			}
			@-webkit-keyframes dot1play{
				0%,60%{
					background-color: rgba(255,255,255,1);
					}
				70%,100%{
					background-color: transparent;
					}
			}
			@keyframes dot2play{
				0%,60%{
					background-color: transparent;
					}
				70%,100%{
					background-color: rgba(255,255,255,1);
					}
			}
			@-webkit-keyframes dot2play{
				0%,60%{
					background-color: transparent;
					}
				70%,100%{
					background-color: rgba(255,255,255,1);
					}
			}
		</style>
	</head>
	<body>
		<div class="box-one">
			<div class="ad-position">
				<a href="#" class="dot1"></a>
				<a href="#" class="dot2"></a>
			</div>
		</div>
	</body>
</html>
